<template>
	<el-container>
		<el-container class="is-vertical">
			<div class="panel-search-box">
				<div class="panel-search">
					<el-select v-model="search.type" placeholder="类型" clearable filterable class="w165">
						<el-option label="余额提现" :value="10"></el-option>
						<el-option label="佣金结算" :value="11"></el-option>
					</el-select>
					<el-date-picker v-model="search.createdAt" type="datetimerange"
						value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
						range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
						class="sDateSelect" style="margin-left:10px;"
					></el-date-picker>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" icon="el-icon-plus" @click="table_withdrawal">提现申请</el-button>
					<div style="color: goldenrod;">余额：{{ balance.amount || 0 }}</div>
                    <div style="color: goldenrod;">可提现余额：{{ balance.availableAmount || 0 }}</div>
					<div style="color: red;">冻结余额：{{ balance.pendingAmount || 0 }}</div>
				</div>
			</div>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="$API.finance.log.list" :params="search" remoteSort @dataChange="dataChange">
					<el-table-column label="序号" prop="index" width="70" align="left"></el-table-column>
					<el-table-column label="类型" align="center" width="200px">
						<template #default="scope">
							{{ scope.row.type?.name }}
						</template>
					</el-table-column>
					<el-table-column label="金额" align="center" width="150px">
						<template #default="scope">
							<span v-if="scope.row.amount < 0" style="color: rgb(0, 170, 0);">{{ scope.row.amount }}</span>
							<span v-else style="color: rgb(255, 170, 0);">{{ scope.row.amount }}</span>
						</template>
					</el-table-column>
					<el-table-column label="描述" prop="description" align="center"></el-table-column>
					<el-table-column label="交易时间" prop="createdAt" align="center" width="150px"></el-table-column>
					<el-table-column label="操作" fixed="right" align="center" width="150">
						<template #default="scope">
							<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>

	<detail v-if="dialog.detail" ref="detailDialog" @success="handleSuccess"></detail>

	<withdrawal v-if="dialog.withdrawal" :balance="balance" ref="withdrawalDialog" @success="handleSuccess"></withdrawal>
</template>

<script>
import detail from './detail.vue'
import withdrawal from './components/withdrawal.vue';
export default {
	name: 'financeLog',
	components: {
		detail,
		withdrawal
	},
	data() {
		return {
			loading: {
				remote: false
			},
			dialog: {
				detail: false,
			},
			search: {
				type: null,
				createdAt: null,
			},
			balance: {}
		}
	},
	mounted() {
		this.getBalance()
	},
	methods: {
		// 搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		dataChange(res, tableData) {
			let total = res.data.total
			let perPage = res.data.perPage
			let page = (this.$refs.table && this.$refs.table.currentPage) || 1
			tableData.forEach((item, index) => {
				item.index = total - (page * perPage + index - perPage)
			})
		},
		// 获取余额
		getBalance() {
			this.$API.finance.balance.get({}).then(res => {
                this.balance = res.data
            })
		},
		//查看
		async table_show(row) {
			this.dialog.detail = true
			this.$nextTick(() => {
				this.$refs.detailDialog.open(row, 'first')
			})
		},
		// 提现
		table_withdrawal() {
			this.dialog.withdrawal = true
			this.$nextTick(() => {
				this.$refs.withdrawalDialog.open('withdraw')
			})
		},
		//本地更新数据
		handleSuccess() {
			this.getBalance()
			this.$refs.table.refresh()
		}
	}
}
</script>

<style scoped>
.panel-sFlex {
	display: flex;
	overflow: hidden;
}

.w165 {
	width: 165px;
}
</style>
